
/* Intro */
.b_ProgramGrid .intro{
    display:grid;
    gap:20px;
    margin-bottom:40px;
    max-width:750px;
}
@media (width >= 1000px){
    .b_ProgramGrid .intro{
        margin-bottom:100px;
    }
}





/* Programs */
.b_ProgramGrid .grid a{
    text-decoration: none;
}
.b_ProgramGrid .grid .image{
    border-radius: 30px;
    overflow: hidden;
}
.b_ProgramGrid .grid .image img{
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    transition: scale 0.3s ease-in-out;
}
.b_ProgramGrid .grid .text{
    padding:20px;
    display: grid;
    gap: 14px;
}
.b_ProgramGrid .grid .text p:last-of-type{
    margin-bottom:0;
}


/*Hover Effects*/
.b_ProgramGrid .page:hover .image img{
    scale:1.05;
}
.b_ProgramGrid .page:hover .arrow_link{
    gap: 12px;
}
.b_ProgramGrid .page:hover h3{
    text-decoration: underline;
}







/* GRIDS */

/*THREE COLUMN GRID*/
.b_ProgramGrid .three_columns {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-direction: column;
    align-items: baseline;
}
@media (width >= 1000px){
    .b_ProgramGrid .three_columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 80px 30px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .grid.three_columns .page {
        width: calc(33% - 20px);
        /* width: calc(50% - 90px); */
    }
}



/*TWO COLUMN GRID*/
.b_ProgramGrid .two_columns {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    align-items: baseline;
}
/*Medium Show In Columns*/
@media (width >= 600px){
    .b_ProgramGrid .two_columns {
        grid-template-columns: 1fr 1fr;
    }
}




/* When two are stacked */
.b_ProgramGrid + .b_ProgramGrid{
    padding-block: 0 64px;
}
@media (width >= 1000px){
    .b_ProgramGrid + .b_ProgramGrid {
        padding-block: 0 100px;
    }
    .b_ProgramGrid + .b_ProgramGrid .grid{
        margin-top:0;
    }
}